<template>
  <div>
    <div
      :id="id"
      :style="{
        width,
        height
      }"
    ></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    width: {
      type: String,
      default: "400px"
    },
    height: {
      type: String,
      default: "400px"
    },
    id: {
      type: String,
      default: ""
    },
    pieData: {
      type: Object,
      default: () => {}
    }
  },

  computed: {
    // 专注度百分比格式化
    focusFormat() {
      return (value) => {
        return parseFloat(value) || 0;
      };
    }
  },
  methods: {
    init() {
      const { pieData } = this.$props;
      const option = {
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "80%",
            data: [
              { value: this.focusFormat(pieData.teacher_time), name: "Search Engine" },
              { value: this.focusFormat(pieData.student_time), name: "Direct" }
            ],
            color: ["#08A8FF", "#08CCFF"],
            label: {
              show: true,
              position: "inside",
              formatter: (a) => {
                return `${a.percent}%`;
              }
            }
          }
        ]
      };
      const dom = document.getElementById(this.$props.id);
      const lineCharts = echarts.init(dom);
      lineCharts.setOption(option);
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  }
};
</script>
